import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { View, Text, Input, Image } from '@tarojs/components';
import './AddForm.less';
import FormSelect from '@/pages/common/form-select';
import select from './img/select.png'
import selectd from './img/selectd.png'
// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class AddForm extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  render() {
    let {
      main: { isLoading, isDefaltAddress, areaInfo },
      actions: { action },
    } = this.props;
    return (
      <>
        <View className="componentAddForm">
          <>
            <View className="from-select t_title">
              <Text className="select-label">收货人</Text>
              <Input
                className="mess-text"
                maxlength={20}
                placeholder="请输入收货人姓名"
                placeholder-style="color:#666666;"
                onInput={(e) => {
                  action.commonChange('main.consigneeName', e.detail.value)
                }}
              />
            </View>
          </>
          <>
            <View className="from-select t_title">
              <Text className="select-label">手机号码</Text>
              <Input
                className="mess-text"
                maxlength={11}
                type="number"
                placeholder="请输入手机号"
                placeholder-style="color:#666666;"
                onInput={(e) => {
                  action.commonChange('main.consigneeNumber', e.detail.value)
                }}
              />
            </View>
          </>
          <>
            <View className="from-select t_title" style={{ padding: 0 }}>
              <Text className="select-label">所在地区</Text>
              <FormSelect
                value={areaInfo}
                formStyle={{
                  paddingLeft: 0,
                  paddingRight: 0,
                  flex: 1,
                }}
                placeholder="请选择所在地区"
                selectRight={{ flex: 1, justifyContent: 'space-between' }}
                inputStyle={{
                  fontSize: '32rpx',
                  color: '#333333',
                  textAlign: 'left'
                }}
                onClick={() => {
                  // this.showMap()
                  action.commonChange('main.pickerShow', true);
                }}
              />
            </View>
          </>
          <>
            <View className="from-select t_title">
              <Text className="select-label">详细地址</Text>
              <Input
                className="mess-text"
                maxlength={20}
                placeholder="请填写详细地址"
                placeholder-style="color:#666666;"
                onInput={(e) => {
                  action.commonChange('main.deliveryAddress', e.detail.value)
                }}
              />
            </View>
          </>
        </View>
        <View className="componentAddForm from-select" style={{ marginTop: 0, padding: 16, flexDirection: 'row' }}>
          <Text style={{ marginTop: 3 }} className='select-label'>设为默认</Text>
          <View
            style={{ alignItems: 'flex-end', flex: 1 }}
            onClick={(e) => {
              e.stopPropagation();
              if (isDefaltAddress == 1) {
                action.commonChange('main.isDefaltAddress', 0)
              } else {
                action.commonChange('main.isDefaltAddress', 1)
              }
            }}>
            <Image className="select" src={isDefaltAddress == 1 ? select : selectd} mode="widthFix" />
          </View>
        </View>
      </>
    );
  }

  //显示地图
  showMap() {
    //使用在腾讯位置服务申请的key（必填）
    const key = "R3LBZ-J76KL-5JBPR-EQ6ZQ-N7PE5-RMB36";
    //调用插件的app的名称（必填）
    const referer = "瑞智万家";
    Taro.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
    });
  }
}
